---
title: Gradient Background
description: A background component featuring a subtle yet engaging animated gradient effect, smoothly transitioning colors to enhance visual depth.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-backgrounds-gradient" />

## Installation

<ComponentInstallation name="components-backgrounds-gradient" />

## Usage

```tsx
<GradientBackground />
```

## API Reference

### GradientBackground

<TypeTable
  type={{
    transition: {
      description: 'The transition of the gradient',
      type: 'Transition',
      required: false,
      default: "{ duration: 15, ease: 'easeInOut', repeat: Infinity }",
    },
    '...props': {
      description: 'The props of the GradientBackground.',
      type: 'React.ComponentProps<"div">',
      required: false,
    },
  }}
/>
